<template>
	<view class="cate_list">
		<view class="list1">
			<view class="list1_item" v-for="(item,index) in cateList"  @click="goDetail(item.id,item.page_url)">
				<view class="list1_imgPic"><image :src="item.pic" mode=""></image></view>
				<view class="list1_name">{{item.cate_name}}</view>
			</view>
		</view>
		<view class="list2">
			<view class="list2_head">精选推荐供应链专场   <span style="margin: 0px 20rpx;">|</span>   时令好货源</view>
			<view class="list2_list">
				<view class="list2_item" v-for="(item,index) in goodsList"  @click="goDetail(item.id,item.page_url)">
					<view class="list2_imgPic"><image :src="item.pic" mode=""></image></view>
					<view class="list2_text">
						<view class="list2_Name">{{item.cate_name}}     
						<span class="iconfont icon-xiangyou"></span>
						</view>
						<view class="list2_mark" :class="'colorStatus'+ index">{{item.cate_mark}}</view>
					</view>
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { GetIndexGoodsCateList } from '@/api/api.js';
	export default {
		name: 'CateList',
		data() {
			return {
				"cateList": [],
				"goodsList": [],
				'colorStatus':[],

			};
		},
		onLoad(){
			this.colorStatus = [
				"color:#e77e7e",
				"color:#6dcad5",
				"color:#f1bc0f",
				"color:#47ce54",
			];
		},
		onshow(){
			
		},
		mounted() {
			
			this.GetIndexGoodsCateList();
		},
		created() {},
		methods: {
			GetIndexGoodsCateList(){
				
				GetIndexGoodsCateList().then(res => {
					this.cateList = res.data.list;
					this.goodsList = res.data.goodsList;
		
				});
				// 
			},
			goDetail(id,page_url) {
				if(!page_url){
					console.log(page_url);
					page_url = "/pages/goods_details/index?id="+ id;
					console.log(page_url);
				}
				
				uni.navigateTo({
					url: page_url
				});
				// this.$emit('detail', page_url);
			},
		}
	}
</script>

<style lang="scss">
	
	.colorStatus0{
		color:#e77e7e;
	}
	.colorStatus1{
		color:#6dcad5;
	}
	.colorStatus2{
		color:#f1bc0f;
	}
	.colorStatus3{
		color:#47ce54;
	}
	.iconfont {
		margin-left: 10rpx;
		font-size: 20rpx;
		color:#726969;
	}
	.cate_list{
		margin: 0 20rpx;
		.list1 {
			font-size: 25rpx;
			background: #FFFFFF;
			display:grid;
			grid-template-columns:repeat(5,1fr);
			grid-gap:10rpx;
			margin-top: 20rpx;
			padding: 10rpx 0;
			.list1_item{
				place-self:center;
				text-align: center;
				.list1_name{
					margin-top: 10rpx;
				}
				.list1_imgPic{
					width: 100rpx;
					height: 100rpx;
					>image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
			
		}
		.list2{
			
			padding:14rpx 0;
			margin-top: 20rpx;
			background: #fcf7f4;
			
			
			.list2_head{
				font-size: 38rpx;
				color: red;
				font-weight: 900;
				margin-left: 10rpx;	
			}
			.list2_list{
				margin-top: 5rpx;
				display:grid;
				grid-template-columns:repeat(4,1fr);
				
				width: 100%;
				height: 180rpx;
				// line-height: 110rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				/*段落中文本不换行*/
				white-space: nowrap;
				/*设置横向滚动*/
				overflow-x: scroll;
				/*禁止纵向滚动*/
				overflow-y: hidden;
				/*文本平铺*/
				text-align: justify;
				// .cateList::-webkit-scrollbar {
				// 	/*隐藏滚动条*/
				// 	display: none;
				// }
				
				.list2_item{
					margin: 15rpx;
					place-self:center;
					border-radius: 15rpx;
					background: #FFFFFF;
					box-shadow: 2rpx 0px 5rpx #888888;
					.list2_imgPic{
						width: 150rpx;
						height: 110rpx;
						>image{
							width: 100%;
							height: 100%;
							border-radius: 15rpx 15rpx 0 0;	
						}
					}
					.list2_text{
						margin-left: 10rpx;
						padding: 8rpx 0;
						.list2_Name{
							font-size: 25rpx;
						}
						.list2_mark{
							font-size: 20rpx;
						}
					}
					
				}
				
			}
		}
	}
	
	
</style>
